<template>
	<view id="barter-apply">
		<view class="content-box">
			<view class="content-form">
				<view class="h3">物品信息</view>
				<view class="apply-row">
					<view class="h6">换物品名称</view>
					<view class="apply-in">
						<input type="text" v-model="formObj.good_name" placeholder="请输入名称" placeholder-style="color:#CBCBCB;" />
					</view>
				</view>
				<view class="apply-row">
					<view class="h6">物品大约价值</view>
					<view class="apply-in">
						<input type="digit" v-model="formObj.price" placeholder="请输入价值" placeholder-style="color:#CBCBCB;" />
					</view>
				</view>		
				<view class="apply-row">
					<view class="h6">上传拍图（限一张≤5M）</view>
					<view class="apply-img" @click="chooseImgs()">
						<view class="imgs" v-if="formObj.images">
							<image class="up-img" :src="formObj.images" mode=""></image>
							<image src="/static/icon/icon_delect11.png" @click.stop="formObj.images = ''" class="close-icon" mode=""></image>
						</view>
						<view v-else class="add-img" >
							<image src="/static/icon/add_icon_01.png" class="add-icon" mode=""></image>
							<text>上传图片</text>
						</view>
					</view>
				</view>	
			</view>
			<view class="margin-bg"></view>
			<view class="content-form">
				<view class="h3">收货地址</view>
				<view class="apply-row">
					<view class="h6">收件人</view>
					<view class="apply-in">
						<input type="text" v-model="formObj.realname" placeholder="请输入收件人名称" placeholder-style="color:#CBCBCB;" />
					</view>
				</view>
				<view class="apply-row">
					<view class="h6">联系电话</view>
					<view class="apply-in">
						<input type="number" v-model="formObj.mobile" placeholder="请输入联系电话" placeholder-style="color:#CBCBCB;" />
					</view>
				</view>
				<view class="apply-row">
					<view class="h6">地址信息</view>
					<view class="apply-in">
						<input type="text" v-model="formObj.address" placeholder="请输入地址" placeholder-style="color:#CBCBCB;" />
					</view>
				</view>
			</view>
		</view>
		
		<view class="content-footer">
			<view :class="['footer-btn',disabled?'footer-dis':'']"  @click="openSubmit()">确认提交</view>
		</view>
		
		<!-- 二次确认 -->
		<uni-popup ref="submitPopup" type="center" :mask-click="true">
			<view class="pay-popup">
				<view class="popup-top">
					<view></view>
					<view class="popup-title"></view>
					<view></view>
				</view>
				<view class="sure-text">确认提交？</view>
				<view class="popup-btn">
					<view class="btn" @click="$refs.submitPopup.close()">取消</view>
					<view class="btn" @click.stop="submitForm()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import { apiroot } from '@/siteInfo.js'
export default {
	data() {
		return {
			formObj:{
				good_id: '',
				good_name: '',
				price: '',
				images: '',
				realname:'',
				mobile: '',
				address: '',
			},
			disabled: false,
		};
	},
	onLoad(e) {
		this.formObj.good_id = e.cid;
	},
	components: {
		uniPopup
	},
	onShow() {

	},
	methods: {
		// 上传图片
		chooseImgs(){
			uni.chooseImage({
				count:1,
				success: (filePaths) => {
					var imageSrc = filePaths.tempFilePaths[0];
					this.$Request.upload({
						url: '/api/barter/uploadImg',
						filePath: imageSrc,
						formData: null,
						name: 'headPic',
						success: (res)=>{
							// console.log(res)
							let data = JSON.parse(res.data)
							console.log(data)
							this.formObj.images = apiroot +'/'+ data.path;
							// that.modifyPath = data.path
							// that.userInfo.userPhoto = file
						}
					})
				}
			});
		},
		// 检验
		handleCheck(){
			if(!this.formObj.good_name){
				return this.$api.msg('请输入名称')
			}
			if(!this.formObj.price){
				return this.$api.msg('请输入价值')
			}
			if(!this.formObj.images){
				return this.$api.msg('请上传拍图')
			}
			if(!this.formObj.realname){
				return this.$api.msg('请输入收件人名称')
			}
			if(!this.formObj.mobile){
				return this.$api.msg('请输入联系电话')
			}
			let phoneReg = /^1[3456789]\d{9}$/
			if(!phoneReg.test(this.formObj.mobile)){
				return this.$api.msg('请输入正确的手机号码')
			}
			if(!this.formObj.address){
				return this.$api.msg('请输入地址')
			}
			return true;
		},
		// 打开弹框
		openSubmit(){
			if(this.handleCheck() !== true){
				return false;
			}
			this.$refs.submitPopup.open()
		},
		// 提交数据
		submitForm(){
			this.$Request.request('/api/barter/add','post',this.formObj).then((res)=>{
				if(res.status == 1){
					this.$api.msg('上传成功')
					setTimeout(()=>{
						this.$refs.submitPopup.close()
						uni.redirectTo({
							url: `/pages/barter/mine`
						})
					})
				}else {
					this.$api.msg(res.msg)
				}
			})
		},
	}
};
</script>

<style>
	page {
		background: #fff;
	}
</style>

<style scoped lang="scss">
	.content-box {
		padding-bottom: 160rpx;
	}
	.content-form {
		width: 100%;
		padding: 36rpx 32rpx;
		box-sizing: border-box;
		.h3 {
			font-size: 32rpx;
			color: #1D1E22;
			font-weight: 500;
		}
		.apply-row {
			padding-top: 36rpx;
			.h6 {
				font-size: 24rpx;
				color: #92969E;
				line-height: 34rpx;
				margin-bottom: 22rpx;
			}
			.apply-in {
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #EFEFEF;
				input {
					font-size: 30rpx;
					color: #1D1E22;
				}
			}
			.apply-img {
				width: 176rpx;
				height: 176rpx;
				border: 2rpx dashed #C0BEB9;
				.add-img {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					font-size: 24rpx;
					color: #C0BEB9;
					.add-icon {
						width: 52rpx;
						height: 52rpx;
						margin-bottom: 16rpx;
					}
				}
				.imgs {
					width: 100%;
					height: 100%;
					padding: 12rpx;
					box-sizing: border-box;
					position: relative;
					.up-img {
						width: 100%;
						height: 100%;
					}
					.close-icon {
						width: 32rpx;
						height: 32rpx;
						position: absolute;
						top: -20rpx;
						right: -20rpx;
					}
				}
			}
		}
	}
	
	.content-footer {
		position: fixed;
		width: 100%;
		z-index: 11;
		bottom: 0rpx;
		left: 0px;
		padding: 32rpx 54rpx;
		box-sizing: border-box;
		background: #fff;
		z-index: 11;
		.footer-btn {
			width: 100%;
			height: 76rpx;
			background: #EE486C;
			border-radius: 14rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #fff;
		}
		.footer-dis {
			background: #CCD0D8;
		}
	}
	
	
	.pay-popup {
		width: 600upx;
		background: #fff;
		border-radius: 16upx;
		padding: 40upx 0upx 12rpx;
		box-sizing: border-box;
		.popup-top {
			padding: 0px 30upx;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 34upx;
			.popup-title {
				font-size: 36upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
			}
		}
		
		.sure-text {
			padding: 20rpx 0px 60rpx;
			text-align: center;
			font-size: 32upx;
			font-family: PingFangSC-Semibold, PingFang SC;
			color: #000;
		}
		
		.popup-btn {
			display: flex;
			align-items: center;
			padding-top: 10rpx;
			border-top: 2rpx solid rgba(0, 0, 80, 0.05);
			.btn {
				width: 50%;
				height: 87rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 34rpx;
				color: #909090;
			}
			.btn:last-child {
				color: #EE486C;
				border-left: 2rpx solid rgba(0, 0, 80, 0.05);
			}
		}
	}
	
</style>
